<template>
  <div class="hot_topic">
    <ul class="side_nav">
      <li>
        <router-link to="/"><i class="el-icon-s-home"></i>首页</router-link>
      </li>
      <li @click="changeList(1)" :class="nowNum == 1 ? 'nowNum' : ''">
        <i class="el-icon-s-opportunity"></i>热点资讯
      </li>
      <li @click="changeList(2)" :class="nowNum == 2 ? 'nowNum' : ''">
        <i class="el-icon-s-order"></i>热门文章
      </li>
      <li @click="changeList(3)" :class="nowNum == 3 ? 'nowNum' : ''">
        <i class="el-icon-video-camera-solid"></i>热门视频
      </li>
    </ul>
    <div class="hotList_box" style="overflow: auto">
      <ul
        class="hotList list"
      >
        <li v-for="(hotList, i) in hotList" :key="hotList.id" @click="newsParticulars(hotList.id,hotList.w_id)">
          <h4 >
            <i>{{ i + 1 }}</i
            >{{ hotList.title }}
          </h4>
          <p></p>
          <div class="user_time">
            <span>{{ hotList.name }}</span
            ><span>{{ hotList.time }}</span>
          </div>
          <div class="hotimg">
            <img src="../assets/img/bg1.jpeg" alt="" />
          </div>
        </li>
      </ul>
      <p  class="onlogin" @click="lookMore">查看更多</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: false,
      nowNum: 1,
      hotList: [],
    };
  },
  name: "hotTopic",
  mounted() {
    this.getNews()
  },
  methods: {
    changeList(num) {
      this.nowNum = num;
      this.getNews()
    },
     newsParticulars(id1, id2) {
      this.$router.push({
        path: "/Details/news",
        query: { newsID: id1, writerID: id2 },
      });
    },
    lookMore(){
      if(this.nowNum==1){
      this.$router.push({ path: "/Search",query:{type:1} });

      }else if(this.nowNum==2){
      this.$router.push({ path: "/Search",query:{type:0} });

      }else{
      this.$router.push({ path: "/Search",query:{type:1} });

      }
    },
    getNews(){
      axios.post(`http://localhost:3000/hot`,{
        type:this.nowNum-1
      }).then((ret) => {
        console.log(ret.data.dataList);
        ret.data.dataList.forEach((e) => {
            if (e.author_name) {
              e.name = e.author_name;
            } else if (e.writer) {
              e.name = e.writer;
            } else {
              e.name = e.source;
            }
          });
          
        this.hotList=ret.data.dataList;
      })
    }
  },
};
</script>

<style scoped>
.hot_topic {
  position: relative;
  display: flex;
}
.side_nav {
  width: 200px;
  height: 500px;
  position: sticky;
  top: 100px;
  color: #606266;
  padding: 20px;
  background-color: #fff;
  box-shadow: 5px 2px 5px #c0c4cc;
  border-left: 1px solid #e0e1e4;
  border-top: 1px solid #e0e1e4;
}

.side_nav > li {
  padding: 20px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.side_nav > li i {
  font-size: 20px;
  margin-right: 10px;
}
.hotList_box{
  background-color: #f5f5f5;

}
.hotList {
  width: 900px;
  padding: 10px;
  margin-left: 30px;
}
.hotList li {
  position: relative;
  padding: 20px 10px;
  background-color: #fff;
  margin: 20px 10px;
  cursor: pointer;
}
.nowNum {
  color: #ff8200;
}
.hotList li > h4 {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
}
.hotList li > p {
  width: 75%;
  height: 50px;
  padding: 10px 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.hotList li > h4 i {
  display: inline-block;
  text-align: center;
  width: 50px;
  font-weight: 700;
  font-size: 18px;
  color: #ff8200;
}
.hotList li:nth-of-type(-n + 3) > h4 i {
  color: #f26d5f;
}
.user_time {
  color: #97a2ab;
}
.user_time > span {
  margin: 0 20px;
}
.hotimg {
  width: 20%;
  height: 80%;
  position: absolute;
  right: 20px;
  top: 20px;
}
.onlogin {
  padding-bottom: 20px;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  color: #66b1ff;
}
</style>
